<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xslider Demo</title>
<meta name="Keywords" content=" " />
<meta name="Description" content=" " />
<style type="text/css">
body{margin:0 auto;	text-align:center; color:#616161; font: 12px/1.5 arial, \5b8b\4f53;}
ul,p{margin:0; padding:0;}
li{list-style-type:none;}
img{border:0;}
:focus{outline:0;}
h1{color:#000; margin-bottom:30px; font-size:30px;}
h2{color:#000; background-color:#eee; width:540px; margin-left:auto; margin-right:auto; text-align:left; padding-left:5px;}
a:link,a:visited{color:#333; text-decoration:none;}
a:hover{color:#000;}

a.abtn{
	position:absolute;
	top:4px;
	display:block;
	height:132px;
	width:6px;
	overflow:hidden;
	text-indent:-20000px;
	background:url(images/arrow3.gif) 0px center no-repeat;
}
a.aleft{
	left:7px;
}
a.agrayleft{
	cursor:default;
	background-position:-12px center;
}
a.aright{
	right:7px;
	background-position:-6px center;
}
a.agrayright{
	cursor:default;
	background-position:-18px center;
}

.productshow{
	width:540px;
	height:132px;
	padding:4px 0;
	margin:20px auto;
	position:relative;
	text-align:center;
	font-family:微软雅黑, 黑体;
	background:url(images/productshow.png) no-repeat;
}
.productshow .scrollcontainer{
	width:486px;
	height:130px;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}
.productshow .scrollcontainer ul{
	width:20000px;
	position:absolute;
	left:0px;
	top:0px;
}
.productshow .scrollcontainer li{
	float:left;
	width:162px;
	height:130px;
	text-align:center;
}
.productshow .scrollcontainer li.last{
	background:none;
}
.productshow .scrollcontainer li div{
	height:95px;
	width:162px;
	overflow:hidden;
	text-align:center;
}
.productshow .scrollcontainer a:hover img{
	filter:alpha(opacity=86);-moz-opacity:0.86;opacity:0.86;
}
.productshow .scrollcontainer li p{
	margin:0;
	line-height:32px;
}

.vscroll{
	width:540px;
	height:120px;
	overflow:hidden;
	margin:20px auto;
	position:relative;
	text-align:left;
	line-height:20px;
}
.vscroll .vscrollobj{
	position:absolute;
	left:0px;
	top:0px;
}
.vscroll a.abtn{
	background-color:#f1f1f1;
	border:1px solid #666;
	height:110px;
}

.videolistwraper{
	width:206px;
	height:243px;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	position:relative;
}
.videolist{
	text-align:center;
	width:106px;
	height:200px;
	overflow:hidden;
	margin:25px auto 25px;
	position:relative;
}
.videolist ul{
	position:absolute;
	left:0px;
	top:0px;
}
.videolist li{
	height:100px;
	overflow:hidden;
}
.videolist .img{
	position:relative;
	width:106px;
	height:53px;
	cursor:pointer;
}
.videolist .img img{
	width:100px;
	height:47px;
	border:3px solid #fff;
}
.videolist .img a{
	display:block;
	width:106px;
	height:53px;
	position:absolute;
	left:0;
	top:0;
	filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;
}
.videolist .img a:hover{
	display:block;
	filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
}
.videolist .img a.now{
	background:none;
}
.videolist p{
	margin-bottom:0;
	font-family:微软雅黑;
}
.newslistwraper{
	width:540px;
	margin:0 auto 150px;
	position:relative;
}
.newslistwraper a.abtn{height:20px;top:0;}
.newslist{
	height:20px; 
	line-height:20px; 
	overflow:hidden;
	position:relative;
}
.newslist ul{position:absolute;left:0px;top:0px;width:540px;}
</style>
</head>

<body>
<h1>Xslider Demo</h1>

<h2>一、左右切换：每次移动固定距离</h2>
<div class="productshow">
	<div class="scrollcontainer">
		<ul>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">1.家电彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">2.幻彩变色彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">3.环保彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">4.家电彩涂钢板</a></p>
			</li>
		</ul>
	</div>
	<a class="abtn aleft" href="#left">左移</a>
	<a class="abtn aright" href="#right">右移</a>
</div>

<h2>二、左右切换：最后一个显示在最右侧</h2>
<div class="productshow">
	<div class="scrollcontainer">
		<ul>
			<li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">1.家电彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">2.幻彩变色彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">3.环保彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">4.家电彩涂钢板</a></p>
			</li>
		</ul>
	</div>
	<a class="abtn aleft" href="#left">左移</a>
	<a class="abtn aright" href="#right">右移</a>
</div>

<h2>三、自动切换</h2>
<div class="productshow">
	<div class="scrollcontainer">
		<ul>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">1.家电彩涂钢板 first</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">2.幻彩变色彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">3.环保彩涂钢板</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro1.jpg" alt="" /></a></div>
				<p><a href="">4.家电彩涂钢板</a></p>
			</li>
		</ul>
	</div>
	<a class="abtn aleft" href="#left">左移</a>
	<a class="abtn aright" href="#right">右移</a>
</div>

<h2>四、循环切换</h2>
<div class="productshow">
	<div class="scrollcontainer">
		<ul>
			<li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">1.家电彩涂钢板 first</a></p>
			</li>
			<li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">2.幻彩变色彩涂钢板</a></p>
			</li>
            <li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">3.幻彩变色彩涂钢板</a></p>
			</li>
            <li>
				<div><a href="###"><img src="images/temp_pro2.jpg" alt="" /></a></div>
				<p><a href="">4.幻彩变色彩涂钢板</a></p>
			</li>
		</ul>
	</div>
	<a class="abtn aleft" href="#left">左移</a>
	<a class="abtn aright" href="#right">右移</a>
</div>

<h2>五、文本的上下滚动</h2>
<div class="vscroll">
	<div class="vscrollobj">
    	<p>当企业家们在默默无闻的为社会提供公共产品的时候，慈善组织却做不了什么。仔细想一想，你能找到哪怕就一个慈善的成就，能够像手机或者避孕药那样革新性的发明？ 相反地，慈善史上却充斥着失败的例子，比如慈善的努力反而让收益人的状况更糟糕等。盖兹基金会自己承认，它最主要的目标之一， 一项历时10年、耗资20亿的全国高中重组计划彻底失败，而该计划原本打算把每个高中的学生数控制在400人以内。失败的慈善事业比比皆是，但就肯承认自己的失败而言，该基金会却很突出。</p>
        <p>我的观点很简单。对于某人的资源是使用在慈善事业还是其他的事业，没有任何固定的标准去判断那种更好或更高尚。如果真的有，那就是，只有市场才能更好的分配资源给那些最有价值的地方，并去惩罚失败者。任何时候，关门的公司都不少见。可到底有多少慈善协会因为经营不善而倒闭呢？"</p>
        <p>当企业家们在默默无闻的为社会提供公共产品的时候，慈善组织却做不了什么。仔细想一想，你能找到哪怕就一个慈善的成就，能够像手机或者避孕药那样革新性的发明？ 相反地，慈善史上却充斥着失败的例子，比如慈善的努力反而让收益人的状况更糟糕等。盖兹基金会自己承认，它最主要的目标之一， 一项历时10年、耗资20亿的全国高中重组计划彻底失败，而该计划原本打算把每个高中的学生数控制在400人以内。失败的慈善事业比比皆是，但就肯承认自己的失败而言，该基金会却很突出。</p>
        <p>我的观点很简单。对于某人的资源是使用在慈善事业还是其他的事业，没有任何固定的标准去判断那种更好或更高尚。如果真的有，那就是，只有市场才能更好的分配资源给那些最有价值的地方，并去惩罚失败者。任何时候，关门的公司都不少见。可到底有多少慈善协会因为经营不善而倒闭呢？"</p>
    </div>
    <a class="abtn aleft" href="#left">左移</a>
	<a class="abtn aright" href="#right">右移</a>
</div>

<h2>六、上下切换</h2>
<div class="videolistwraper">
    <div class="videolist">
        <ul>
            <li>
                <div class="img">
                    <img src="images/video2.jpg" alt="" />
                    <a href="###" rel="1">&nbsp;</a>
                </div>
                <p>1</p>
                <a href="flv/mirror_30s.flv" target="_blank"><img src="images/download_ico.jpg" alt="" /></a>
            </li>
            <li>
                <div class="img">
                    <img src="images/video1.jpg" alt="" />
                    <a href="###" rel="2">&nbsp;</a>
                </div>
                <p>2</p>
                <a href="flv/mirror_15s.flv"><img src="images/download_ico.jpg" alt="" /></a>
            </li>
            <li>
                <div class="img">
                    <img src="images/video3.jpg" alt="" />
                    <a href="###" rel="3">&nbsp;</a>
                </div>
                <p>3</p>
                <a href="flv/feature.flv" target="_blank"><img src="images/download_ico.jpg" alt="" /></a>
            </li>
            <li>
                <div class="img">
                    <img src="images/video4.jpg" alt="" />
                    <a href="###" rel="4">&nbsp;</a>
                </div>
                <p>4</p>
                <a href="flv/z2000_30.flv" target="_blank"><img src="images/download_ico.jpg" alt="" /></a>
            </li>
            <li>
                <div class="img">
                    <img src="images/video5.jpg" alt="" />
                    <a href="###" rel="5">&nbsp;</a>
                </div>
                <p>5</p>
                <a href="flv/z2000_15.flv" target="_blank"><img src="images/download_ico.jpg" alt="" /></a>
            </li>
    </div>
    <a class="abtn aleft" href="#up">上移</a>
	<a class="abtn aright" href="#down">下移</a>
</div>

<h2>七、上下自动循环切换</h2>
<div class="newslistwraper">
    <div class="newslist">
        <ul>
            <li>日本通过防卫大纲 明确提出加强钓鱼岛等防卫</li>
            <li>温家宝：彻底解决中印边界问题需耐心和时间</li>
            <li>菲律宾称不会对人质事件中香港遇难者作出赔偿</li>
            <li>11月份全国楼市再度量价齐涨 可能引发第三轮调控</li>
            <li>山西巡警队长成黑老大敛财数亿 27套房被查封</li>
        </ul>
    </div>
    <a class="abtn aleft" href="#up">上移</a>
	<a class="abtn aright" href="#down">下移</a>
</div>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/Xslider.js"></script>
<script type="text/javascript">
$(function(){
	//一、左右切换：每次移动固定距离;
	$(".productshow:eq(0)").Xslider({
		unitdisplayed:3,
		numtoMove:3,
		scrollobjSize:Math.ceil($(".productshow:eq(0)").find("li").length/3)*486
	});
	
	//二、左右切换：最后一个显示在最右侧;
	$(".productshow:eq(1)").Xslider({
		unitdisplayed:3,
		numtoMove:3
	});
	
	//三、自动切换;
	$(".productshow:eq(2)").Xslider({
		unitdisplayed:3,
		numtoMove:3,
		autoscroll:2000  //自动移动间隔时间     默认null不自动移动;
	});
	
	//四、循环切换;
	$(".productshow:eq(3)").Xslider({
		unitdisplayed:3,
		numtoMove:2,
		loop:"cycle"
	});
	
	//五、文本的上下滚动;
	$(".vscroll").Xslider({//.productshow是要移动对象的外框;
		unitdisplayed:6,//可视的单位个数   必需项;
		numtoMove:3,//要移动的单位个数    必需项;
		viewedSize:120,//可视宽度或高度    默认查找要移动对象外层的宽或高度;
		scrollobj:".vscrollobj",//要移动的对象     默认查找productshow下的ul;
		unitlen:20,//移动的单位宽或高度     默认查找li的尺寸;
		scrollobjSize:$(".vscrollobj").height(),//移动最长宽或高（要移动对象的宽度或高度）   默认由li个数乘以unitlen所得的积;
		dir:"V"//水平移动还是垂直移动，默认H为水平移动，传入V则表示垂直移动;
	});
	
	//六、上下切换;
	$(".videolistwraper").Xslider({//.productshow是要移动对象的外框;
		unitdisplayed:2,//可视的单位个数   必需项;
		numtoMove:1,//要移动的单位个数    必需项;
		//loop:"cycle",
		dir:"V"//水平移动还是垂直移动，默认H为水平移动，传入V则表示垂直移动;
	});
	
	//七、上下自动循环切换;
	$(".newslistwraper").Xslider({
		unitdisplayed:1,
		numtoMove:1,
		loop:"cycle",
		dir:"V",
		autoscroll:2500,
		speed:300
	});
	
	
	$("a").focus(function(){this.blur();});
})
</script>
</body>
</html>